import React from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import Header from './components/Header'
import './App.css'

function App() {
  const location = useLocation()
  const navigate = useNavigate()

  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: '/index',
      title: '消息',
      icon: <UnorderedListOutline />
    },
    {
      key: '/ment',
      title: '我的',
      icon: <UserOutline />,
    }
  ]

  return (
    <div className="app-container">
      <main className="app-main">
        <Outlet />
      </main>
      
      <div className="tab-bar-container">
        <TabBar activeKey={location.pathname} onChange={value => navigate(value)}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  )
}

export default App
